import React from 'react'
import WeUI, { TabBarItem } from 'react-weui'
import IconHome from '../assets/images/home.png'
import IconUser from '../assets/images/user.png'
import {useNavigate} from 'react-router-dom' //  user 开头 hook
import BDBookItem  from '../components/BDBookItem'
const {
    Tab:WTab,
    TabBody,
    TabBar,
    TabarItem,
    Panel,
    PanelBody,
    SearchBar,
} = WeUI

const Tab = () => {
    const navigate = useNavigate();
    let items = [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6];
    const gotoUser = () => {
        navigate('/user');
    }
    return (
        <div>
            <WTab style={{position:'fixed'}}>
            <SearchBar placeholder="请输入您要查找的图片" lang={{canel:'取消'}} />
                <TabBody>
                    <PanelBody>
                        {
                            items.map((item,i) => {
                                return (
                                    <BDBookItem key={i}/>
                                )
                            })
                        }
                    </PanelBody>
                </TabBody>
                <TabBar>
                    {/* src="/src/assets/images/home.png"  根路径是首页index.html */}
                    <TabBarItem active={true} icon={<img src={IconHome}/>} label="书单"/>
                    <TabBarItem onClick={gotoUser}
                     active={false} icon={<img src={IconUser}/>} label="我"/>
                </TabBar>
            </WTab>
        </div>
    )
}

export default Tab